import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import Page from "@/components/public/page/page";
import insuranceCompanyService from "@/modules/productManage/insuranceCompany.service";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, ref } from "vue";
import AddPopup from "./popup/Add/Add";

export default defineComponent({
  name: "insuranceCompanyPage",
  setup() {
    const LTableRef = ref(null as any);
    const $service = new insuranceCompanyService();
    const addPopupRef = ref(null as any);
    const state = reactive({
      toolbar: {
        left: ["refresh", "add",],
        right: ["filter"],
        add: {
          handler: () => {
            addPopupRef.value.open()
          },
        }
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "50px",
        },
        {
          title: "名称",
          dataIndex: "name",
          align: "center",
          width: "150px",
        },
        {
          title: "简称",
          dataIndex: "abbreviation_name",
          align: "center",
          width: "180px",
        },
        {
          title: "公司类型",
          dataIndex: "type_txt",
          align: "center",
          width: "100px",
        },
        {
          title: "机构类型",
          dataIndex: "organ_top_id",
          align: "center",
          width: "200px",
        },
        {
          title: "机构代码",
          dataIndex: "num",
          align: "center",
          width: "100px",
        },
        {
          title: "许可证代码",
          dataIndex: "license",
          align: "center",
          width: "100px",
        },
        {
          title: "统一信用代码证",
          dataIndex: "affairsnum",
          align: "center",
          width: "150px",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
          align: "center",
          width: "180px",
        },
        {
          title: "更新时间",
          dataIndex: "update_time",
          align: "center",
          width: "180px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      loading: false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    })
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };

    return () => (
      <Page>
        <CardWithTitle title="保司管理">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  if (column.dataIndex === 'operation') {
                    return (
                      <div class="operation">
                        <a-button
                          type="primary"
                          size="small"
                          v-slots={{
                            icon: () => <EditOutlined />,
                          }}
                          onClick={() => {
                            addPopupRef.value.open(record);
                          }}
                        >
                          编辑
                        </a-button>
                        <a-button
                          type="primary"
                          danger
                          size="small"
                          v-slots={{
                            icon: () => <DeleteOutlined />,
                          }}
                          onClick={() => { }}
                        >删除</a-button>
                      </div>
                    )
                  }
                }
              }}
            />
          </LTable>
        </CardWithTitle>
        <AddPopup
          ref={addPopupRef}
          service={$service}
        />
      </Page>
    )
  }
})